<template>
    <f7-page class="common-page">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>人员信息</f7-nav-title>
            <f7-nav-right> </f7-nav-right>
        </f7-navbar>
        <div class="hear-bg"></div>
        <div class="content-box">
            <div class="content-box-top">
                <img v-if="models.model.attachmentId" :src="$util.getImgSrc(models.model.attachmentId)"
                    class="left-box" object-fit="cover" @click="previewImg($util.getImgSrc(models.model.attachmentId))" />
                <img v-else class="left-box"
                                        src="../../../../../assets/img/qzjx/defaultAvatar.png"/>
                <div class="right-box">
                    <div class="title-box">
                        <h3>
                            {{ models.model.personName }}
                        </h3>
                    </div>
                    <p>{{ models.model.orgName || "--" }}</p>
                </div>
            </div>
            <div class="content-box-bottom">
                <div class="bottom-item">
                    <span class="key">联系方式</span>
                    <span class="value">{{ models.model.personMobile || '--' }}</span>
                    <img v-if="models.model.personMobile" src="../../../../../assets/img/qzjx/mobile/icon_tel.png"
                        alt="" width="24" @click="call(models.model.personMobile)" />
                </div>
                <div class="bottom-item">
                    <span class="key">身份证号</span>
                    <span class="value">{{ models.model.personIdcard || '--' }}</span>
                </div>
            </div>
        </div>
        <div class="cer-info" v-if="models.eqmPrjJobPersonCert">
            <div class="title">证书信息</div>
            <div class="cer-content">
                <p class="cer-title">{{ models.eqmPrjJobPersonCert.operationTypeName || "--" }}</p>
                <div class="cer-details">
                    <div class="cer-details-left">
                        <!-- <p>
                            <span class="key">证书类型</span>
                            <span class="value">{{ models.eqmPrjJobPersonCert.operationTypeName || "--" }}</span>
                        </p> -->
                        <p>
                            <span class="key">证件编号</span>
                            <span class="value">{{ models.eqmPrjJobPersonCert.certCode || "--" }}</span>
                        </p>
                        <p>
                            <span class="key">发证机关</span>
                            <span class="value">{{ models.eqmPrjJobPersonCert.certStand || "--" }}</span>
                        </p>
                        <p>
                            <span class="key">发证日期</span>
                            <span class="value">{{ models.eqmPrjJobPersonCert.grantDate || "--" }}</span>
                        </p>
                        <p>
                            <span class="key">证件有效期</span>
                            <span class="value">{{ models.eqmPrjJobPersonCert.certEndDate || "--" }}</span>
                        </p>
                    </div>
                    <div class="cer-details-right">
                        <img  v-if="models.eqmPrjJobPersonCert.certAttachmentId" :src="$util.getImgSrc(models.eqmPrjJobPersonCert.certAttachmentId)"
                            @click="previewImg($util.getImgSrc(models.eqmPrjJobPersonCert.certAttachmentId))" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <div class="records">
            <div class="title">培训记录</div>
            <f7-list media-list class="search-list" v-if="query.data.length > 0">
                <li v-for="(item, index) in query.data" :key="index" @click="onDetail(item)">
                    <span>{{ item.trainDate | date }}</span>
                    <span class="tag tag-gray">已完成<van-icon name="arrow" style="margin-left: 3px;"/></span>
                </li>
            </f7-list>
            <v-empty v-else description="暂无数据" />
        </div>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/workflowController";
import { ImagePreview } from 'vant';

export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            model: "/app/equipment/eqmPrjJobPerson/getEntity",
            query: "/app/equipment/eqmMobileTrainPerson/query",
        };
    }
    onBeforeQuery(type, conditions, params) {
        if (type == 'list') {
            params.length = 9999;
        }
    }
    onInit() {
        this.setSearch("personPkid", this.$f7route.query.personPkid, "form");
        this.setSearch("personPkid", this.$f7route.query.personPkid, "list");
    }
    mixin() {
        return {
            data() {
                return {
                    models: {
                        model: {}
                    },
                };
            },
            methods: {
                // 拨打电话
                call(mobile) {
                    if (mobile && window.plus) {
                        window.plus.device.dial(mobile);
                    }
                },
                onDetail(item) {
                    this.$f7router.navigate(`/business/qzjx/mobileEquipment/operator/trainCreate?pageAction=view&trainId=${item.trainId}`);
                },
                previewImg(url) {
                    ImagePreview({
                        images: [url],
                        closeable: true
                    });
                }
            },
        };
    }
}
</script>

<style lang="less" scoped>
.hear-bg {
    position: absolute;
    top: 44px;
    width: 100%;
    background: linear-gradient(180deg, #1990ff 0%, rgba(25, 144, 255, 0) 100%);
    height: 92px;
}

.content-box {
    position: relative;
    padding: 15px;
    margin: 10px 16px 10px;
    font-size: 13px;
    background: linear-gradient(196deg, #eff6ff 0%, #ffffff 100%);
    box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
    border-radius: 8px;

    .content-box-top {
        display: flex;
        align-items: flex-start;
        /deep/.left-box{
            width: 60px;
            height: 60px;
            border-radius: 30px;
        }
        .right-box {
            word-break: break-all;
            flex: 1;
            margin-left: 10px;

            .title-box {
                display: flex;
                justify-content: space-between;
                align-items: center;

                h3 {
                    color: #242424;
                    font-size: 16px;
                    flex: 1;
                    margin: 5px 0 10px;
                }

                .status {
                    font-size: 13px;
                    color: #61677a;
                }

                .status-yellow {
                    color: #ff9f24;
                }
            }

            span {
                flex-shrink: 0;

                &.tag.tag-fill {
                    background: rgba(115, 125, 138, 0.1);
                    color: #61677a;
                    border: none;
                }

                &.tag.tag-yellow {
                    background: #fef7ee;
                    color: #ff9534;
                    border: none;
                }
            }

            p {
                color: #8995ac;
                font-size: 13px;
                margin: 0;
            }
        }
    }

    .content-box-bottom {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #e9ecf0;

        .bottom-item {
            position: relative;
            font-size: 13px;

            .key {
                display: inline-block;
                width: 75px;
                color: #737d8a;
            }

            .value {
                color: #333333;
            }

            img {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }

            +.bottom-item {
                margin-top: 10px;
            }
        }
    }
}

.search-list {
    margin: 0;

    li {
        padding: 12px 0;
        font-size: 14px;
        color: #333;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e9edf7;

        &:last-child {
            border-bottom: none;
        }

        .tag {
            font-size: 13px;
            background: #fff;
            color: #61677a;
            border: none;
        }

        .tag-yellow {
            color: #ff9f24;
        }
    }
}
.cer-info {
    padding: 15px 15px 10px;
    margin: 10px 16px;
    font-size: 13px;
    box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
    border-radius: 8px;
    background: #fff;

    .title {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        position: relative;
        padding-left: 10px;
        height: 25px;
        line-height: 25px;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            width: 3.5px;
            height: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: #1990ff;
        }
    }

    .cer-content {
        p {
            margin: 0;
        }

        .cer-title {
            font-size: 16px;
            font-weight: 500;
            color: #242424;
            margin: 16px 0 0;
        }

        .cer-details {
            display: flex;
            align-items: center;

            .cer-details-left {
                flex: 1;

                p {
                    display: flex;
                    font-size: 13px;
                    margin-top: 10px;

                    .key {
                        display: inline-block;
                        width: 75px;
                        color: #737d8a;
                    }

                    .value {
                        flex: 1;
                        color: #333333;
                    }
                }
            }

            .cer-details-right {
                width: 94px;
                height: 138px;
                margin-left: 16px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
.records {
    padding: 15px 15px 10px;
    margin: 10px 16px;
    font-size: 13px;
    box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
    border-radius: 8px;
    background: #fff;

    .title {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        position: relative;
        padding-left: 10px;
        height: 25px;
        line-height: 25px;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            width: 3.5px;
            height: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: #1990ff;
        }
    }
}
</style>
